<template>
  <div class="wrapper">
		<swiper :options="swiperOption" ref="mySwiper" v-if="showSwiper">
	    <swiper-slide v-for="item of imgUrl" :key="item.id">  
	    	<img class="sweiper-img" :src="item.imgurl">
	    </swiper-slide>
	    <div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
  </div>
</template> 

<script>
export default {
  name: 'indexSwiper',
	data () {
		return {
			imgUrl:[
				{
					id:'001',
					imgurl:require('../../../assets/imges/banner.png')
				}, 
				{
					id:'002',
					imgurl:require('../../../assets/imges/banner.png')
				},
				{  
					id:'003',
					imgurl:require('../../../assets/imges/banner.png')
				}  
			], 
			 swiperOption: { 
        pagination: '.swiper-pagination',
        loop: true
      }
		}
	},
	computed:{
		showSwiper() {
			return this.imgUrl.length
		}
	}
} 
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> 
	.wrapper{
		width: 100%;
		height: 0; 
		position: relative;
		overflow: hidden;
		padding-bottom: 46%;
		margin: 0;
	}
	.wrapper >>> .swiper-pagination-bullet-active{
		background: #fff;
	}
	.sweiper-img{
		width: 100%;
		height: 100%;
	}
	
</style>
 